<template>
    <!-- 头部 搜索、新增 区域 -->
    <el-row :gutter="20" class="header">
        <el-col :span="6">
            <el-input v-model="search" placeholder="请输入租户名称" clearable>
                <template #append>
                    <el-button @click="getTenant"> 搜索 </el-button>
                </template>
            </el-input>
        </el-col>
        <el-col :span="6">
            <el-button type="primary" @click="createDialog = true">新增</el-button>
        </el-col>
    </el-row>

    <!-- 华丽的分割线 -->
    <el-divider />

    <!-- 表格形式展示house数据 -->
    <div>
        <el-table :data="tenantData" style="width: 100%" max-height="490px">
            <el-table-column prop="id" v-if="false" />
            <el-table-column prop="name" label="租户姓名" width="110" />
            <el-table-column prop="phone" label="手机号" width="120" />、
            <el-table-column prop="email" label="联系邮箱" width="190" />
            <el-table-column prop="address" label="联系地址" width="320" />
            <el-table-column prop="status" label="状态" width="110" sortable>
                <template #default="{ row }">
                    <el-tag v-if="row.status == '0'" type="danger">停用</el-tag>
                    <el-tag v-if="row.status == '1'" type="success">启用</el-tag>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="200">

                <template #="rs">
                    <el-button link type="primary" size="small"
                        @click="editDialog = true; editDataTransfer(rs.row)">编辑</el-button>

                    <!-- 删除确认框 -->
                    <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="deleteTenant(rs.row.id)" icon-color="#F56C6C" title="确认删除这个租户？">
                        <template #reference>
                            <el-button link type="primary" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>

            </el-table-column>
        </el-table>
    </div>

    <!-- 底部分页器 -->
    <div v-if="total > 0">
        <div class="page-box">
            <div class="pagination-block">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                    :page-sizes="[10, 20, 50, 100]" :small="true" :disabled="false" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getTenant"
                    @current-change="getTenant" />
            </div>
        </div>
    </div>

    <!-- 弹出层 -->
    <!-- 新增员工的弹出层 -->
    <el-dialog v-model="createDialog" title="新增租户" width="32%">

        <el-form :model="createForm">

            <el-form-item label="租户姓名">
                <el-input v-model="createForm.name" placeholder="请输入租户姓名" />
            </el-form-item>
            <el-form-item label="租户电话">
                <el-input v-model="createForm.phone" placeholder="请输入租户电话" />
            </el-form-item>
            <el-form-item label="登录密码">
                <el-input v-model="createForm.password" placeholder="请输入登录密码" />
            </el-form-item>
            <el-form-item label="租户邮箱">
                <el-input v-model="createForm.email" placeholder="请输入租户邮箱" />
            </el-form-item>
            <el-form-item label="联系地址">
                <el-input v-model="createForm.address" type="textarea" placeholder="请输入租户联系地址" />
            </el-form-item>


            <el-form-item label="账号状态">
                <el-select v-model="createForm.status" placeholder="请选择租户账号状态">
                    <el-option value="1" label="启用" />
                    <el-option value="0" label="停用" />
                </el-select>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="createDialog = false;">取消</el-button>
                <el-button type="primary" @click="createTenant">确认</el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 编辑员工的弹出层 -->
    <el-dialog v-model="editDialog" title="编辑员工信息" width="32%">

        <el-form :model="editForm">

            <el-form-item label="租户姓名">
                <el-input v-model="editForm.name" placeholder="请输入租户姓名" />
            </el-form-item>
            <el-form-item label="租户电话">
                <el-input v-model="editForm.phone" placeholder="请输入租户电话" />
            </el-form-item>
            <el-form-item label="租户邮箱">
                <el-input v-model="editForm.email" placeholder="请输入租户邮箱" />
            </el-form-item>
            <el-form-item label="联系地址">
                <el-input v-model="editForm.address" type="textarea" placeholder="请输入租户联系地址" />
            </el-form-item>

            <el-form-item label="账号状态">
                <el-select v-model="editForm.status" placeholder="请选择租户账号状态">
                    <el-option value="1" label="启用" />
                    <el-option value="0" label="停用" />
                </el-select>
            </el-form-item>

        </el-form>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editDialog = false">取消</el-button>
                <el-button type="primary" @click="editTenant">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>



<script setup>
import axios from "axios";
import { onMounted, ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
const router = useRouter();

import { tenantGetService, tenantCreateService, tenantUpdateService, tenantDeleteService } from '@/api/user.js'


// 初始化参数
// 按姓名模糊搜索、分页
const search = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 租户信息列表
let tenantData = ref([])
// 新增、编辑弹出层的显示/隐藏控制
let createDialog = ref(false)
let editDialog = ref(false)

// 用于创建tenant的响应式对象
let createForm = reactive({
    name: '',
    phone: '',
    email: '',
    password: '',
    address: '',
    status: ''
})
// 用于编辑tenant的响应式对象
let editForm = reactive({
    id: '',
    name: '',
    phone: '',
    email: '',
    address: '',
    status: ''
})

// 点击编辑时，数据回显
const editDataTransfer = function (row) {
    editForm = row;
    editForm.status = editForm.status.toString();
}

// 获取租户信息
async function getTenant() {
    try {
        let result = await tenantGetService(search.value, currentPage.value, pageSize.value)
        if (result.code == 200) {
            tenantData.value = result.data.list;
            total.value = result.data.total;
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error('系统异常（getTenant）')
    }
}
getTenant();
// 新增租户
async function createTenant() {
    try {
        let result = await tenantCreateService(createForm)
        if (result.code == 200) {
            ElMessage.success(result.msg)
            createDialog.value = false
            getTenant()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        } else {
            ElMessage.error(result.msg)
        }
    } catch (error) {
        ElMessage.error('系统异常（createTenant）')
    }
}

// 编辑租户
async function editTenant() {
    try {
        let result = await tenantUpdateService(editForm)
        if (result.code == 200) {
            ElMessage.success(result.msg)
            editDialog.value = false
            getTenant()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error('系统异常（editTenant）')
    }
}

// 删除租户
async function deleteTenant(id) {
    try {
        let result = await tenantDeleteService(id)
        if (result.code == 200) {
            ElMessage.success(result.msg)
            getTenant()
        }
        else if (result.code == 401) {
            ElMessage.error(result.msg)
            router.push({ path: '/login' });
        }
    } catch (error) {
        ElMessage.error('系统异常（deleteTenant）')
    }
}

</script>

<style>
.header {
    margin-bottom: 7px;
}
</style>